<template>
    <div class="login-wrap">
        <div class="ms-login">
            <a class="login-logo" href="/"><img :src="img" /></a>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="username">
                        <template #prepend>
                            <el-button :icon="User"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        placeholder="password"
                        v-model="param.password"
                        @keyup.enter="submitForm(login)"
                    >
                        <template #prepend>
                            <el-button :icon="Lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm(login)">登录</el-button>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-checkbox class="login-tips" v-model="checked" label="记住密码" size="large" />
                    </el-col>
                </el-row>
                <div class="login-footer">
                    &copy; ColorLib 
                    <a target="_blank" rel="noopener noreferrer" href="https://www.shenkebio.com/"><b>HzSK</b>Bioinfo</a> 
                    - coded by <a target="_blank" rel="noopener noreferrer" href="https://www.shenkebio.com/">SKbioinfo</a>.
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>

</script>


<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useTagsStore } from '@/store/tags';
import { usePermissStore } from '@/store/permiss';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { Lock, User } from '@element-plus/icons-vue';
import useLogin from '@/hooks/Auth/useLogin';
import img from '@/assets/img/Loginlogo.png';

const { getLogin,postLogin } = useLogin()

interface LoginInfo {
    username: string;
    password: string;
    group: string;
    role_id: string;
    detail: string;
}

const lgStr = localStorage.getItem('login-param');
const defParam = lgStr ? JSON.parse(lgStr) : null;
const checked = ref(lgStr ? true : false);
const router = useRouter();
const param = reactive<LoginInfo>({
    username: defParam ? defParam.username : '',
    password: defParam ? defParam.password : '',
    group: defParam ? defParam.group: '',
    role_id: defParam ? defParam.role_id: '',
    detail: defParam ? defParam.detail: '',
});

const rules: FormRules = {
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        },
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};
const permiss = usePermissStore();
const login = ref<FormInstance>();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid: boolean) => {
        if (valid) {
            postLogin(param).then( res=>{
                if(res.status===202){
                    /* 本地存储用户名 */
                    localStorage.setItem('ms_username', param.username);
                    localStorage.setItem('group', res.data["group"]);
                    localStorage.setItem('role_id',res.data["role_id"]);
                    localStorage.setItem('detail',res.data["detail"]);
                    localStorage.setItem('token',res.data["access_token"]);
                    localStorage.setItem('refresh_token',res.data["refresh_token"]);
                    /* 本地存储键值 */
                    let keys = []
                    if (param.username === 'admin'){
                        keys = permiss.defaultList['admin'];
                    } else {
                        for (let item of res.data["permissions"].split(",")){
                            keys.push(item)
                        }
                    }
                    permiss.handleSet(keys);
                    localStorage.setItem('ms_keys', JSON.stringify(keys));
                    router.push('/');
                    ElMessage.success('登录成功');
                    if (checked.value) {
                        localStorage.setItem('login-param', JSON.stringify(param));
                    } else {
                        localStorage.removeItem('login-param');
                    }
                }else{
                    ElMessage.error('登录失败:账户或密码错误！');
                    return false;
                }
            })
          
        } else {
            ElMessage.error('登录失败');
            return false;
        }
    });
};

const tags = useTagsStore();
tags.clearTags();

onMounted(() => {
    getLogin()
})

</script>

<style scoped>
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-image: url(@/assets/img/login-bg.jpg);
    background-attachment: fixed;
    background-size: 100%;
    background-size: cover;
}
.ms-title {
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    /* padding-top: 10px; */
}
.ms-login {
    width: 320px;
    border-radius: 10px;
    background: #fff;
}
.ms-content {
    padding: 10px 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #333;
}
.login-bottom {
    line-height: 40px;
    font-size: 15px;
    padding-left:40px;
}

.login-logo{
    margin-top: 20px;
    margin-bottom: 5px;
    /* margin-left: 20%;
    margin-right: 20%; */
    display:block;
    width:100%;
    height: 50%;
    text-align:center
}
.login-logo img{
    max-width:80%;
    max-height:100px;
    border:0px;
}
.login-footer {
    font-size: 12px;
    margin-left: 1px;
    margin-right: 1px;
}
</style>
